<template>
  <view class="page">
    <Navbar
      title="商城"
      scroll-top="10"
      left-icon="chat"
      left-icon-size="50rpx"
      :auto-back="false"
      occupy
      @left-click="mallMessage"
    />
    <view class="mall-swiper">
      <u-swiper :list="bannerlist" height="332rpx" radius="10" />
    </view>
    <view class="mall-body">
      <view class="f-row">
        <view class="f-flex" v-for="(i, k) in menuList" :key="k" @click="handleTo(i)">
          <u-image
            show-loading
            :show-menu-by-longpress="false"
            :src="i.image"
            width="72rpx"
            height="72rpx"
            shape="circle"
          />
          <text class="f-text" :class="{ chooseText: selectType == i.id }">
            {{ i.name }}
          </text>
        </view>
      </view>
      <view class="f-row" style="margin: 34rpx">
        <image
          :src="require('@/static/mall/mall-story.png')"
          style="width: 442rpx; height: 40rpx"
        />
      </view>
      <Card-item
        v-for="(i, k) in storyList"
        :key="k"
        :index="i.id"
        :image="i.cover_img"
        :title="i.title"
        :bold="false"
        :sub-title="i.create_time"
        @click="handleDetail"
      />
      <u-loadmore :status="status" height="80rpx" />
      <!-- #ifdef H5 -->
      <view style="height: 120rpx" />
      <!-- #endif -->
      <view class="cart-btn" @click="handleCart">
        <u-badge
          type="error"
          max="99"
          :value="cartNumber"
          absolute
          :offset="['-14rpx', '-4rpx']"
        />
        <u-icon
          :name="require('@/static/mall/cart.png')"
          size="33rpx"
          space="5rpx"
          label="购物车"
          label-pos="bottom"
          label-size="22rpx"
          label-color="#FF8528"
        />
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/Navbar/index";
import CardItem from "@/components/CardItem/index";

import config from "@/request/baseUrl.js";
import { mallBanner, mallTypeList, mallCart } from "@/request/mallApi.js";
import { qiuStory } from "@/request/qiuApi.js";
export default {
  components: { Navbar, CardItem },
  data() {
    return {
      bannerlist: [], // 轮播图列表
      menuList: [], // 商品分类列表
      selectType: null, // 选择分类
      storyList: [], // 故事列表
      page: 1, // 页数
      total: 0, // 总数
      cartNumber: 0, // 购物车数量
      status: "loadmore", // 加载状态
    };
  },
  // 监听页面滚动
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  onReachBottom() {
    console.log(22);
  },
  onPullDownRefresh() {
    this.getBannerList();
    this.getTypeList("refresh");
    this.getDataList();
  },
  onShow() {
    this.getBannerList();
    this.getTypeList();
    this.getDataList();
    this.getCartNumber();
  },
  methods: {
    // 获取首页横幅列表
    getBannerList() {
      mallBanner().then((res) => {
        if (res.code == 1) {
          let list = res.data.data.pageAdverts;
          this.bannerlist = list.map((i) => {
            return config.baseUrl + i.media;
          });
        }
      });
    },
    // 获取商品分类列表
    getTypeList(v) {
      mallTypeList()
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.modulesData.categoryModules;
            list.forEach((i) => {
              i.image = config.baseUrl + i.image;
            });
            this.menuList = list;
            if (!this.selectType) this.selectType = list[0].id;
          }
        })
        .finally(() => {
          if (v) {
            uni.showToast({
              title: "刷新成功",
              icon: "success",
            });
            uni.stopPullDownRefresh();
          }
        });
    },
    // 获取购物车数量
    getCartNumber() {
      mallCart({ cart: null }).then((res) => {
        if (res.code == 1) {
          this.cartNumber = res.data.length;
        }
      });
    },
    // 获取商城故事列表
    getDataList() {
      let data = {
        page: this.page,
        pageSize: 10,
        type: "shopping",
      };
      this.status = "loading";
      qiuStory(data)
        .then((res) => {
          if (res.code == 1) {
            this.storyList =
              this.page == 1 ? res.data.list : this.storyList.concat(res.data.list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total >= this.storyList.length ? "nomore" : "loadmore";
        });
    },
    // 消息
    mallMessage() {
      this.$author(() => {
        uni.navigateTo({ url: "/pages/mall/messageCenter" });
      });
    },
    // 跳转商品列表
    handleTo(v) {
      this.selectType = v.id;
      uni.navigateTo({ url: `/pages/mall/goodsList?id=${v.id}` });
    },
    // 跳转购物车
    handleCart() {
      this.$author(() => {
        uni.navigateTo({ url: `/pages/mall/goodsCart` });
      });
    },
    // 查看故事详情
    handleDetail(e) {
      uni.navigateTo({ url: `/pages/qiu/storyDetail?id=${e.id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  background: linear-gradient(180deg, $active-color 0%, #3ba19900 100%);
  background-size: 100% 150%;
  .mall-swiper {
    width: 710rpx;
    height: 370rpx;
    margin: auto;
    z-index: 2;
  }
  .mall-body {
    width: 100%;
    height: 1200rpx;
    margin-top: -60rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;

    .f-row {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 60rpx;
      .f-flex {
        display: flex;
        align-items: center;
        flex-direction: column;
        .f-text {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #555555;
        }
        .chooseText {
          color: #fa6821;
          font-weight: 600;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            left: -10rpx;
            top: 0;
            bottom: 0;
            width: 4rpx;
            background-color: #fa6821;
          }
        }
      }
    }
  }
  .cart-btn {
    position: fixed;
    /* #ifdef MP-WEIXIN */
    bottom: 66rpx;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    bottom: 166rpx;
    /* #endif */
    right: 20rpx;
    width: 92rpx;
    height: 92rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 0 20rpx rgba(218, 218, 218, 0.5);
  }
}
</style>
